<template>
  <div class="app-container">
    <el-row class="row">
      <el-col :span="5" class="left" style="padding: 10px">
        <el-row style="display: flex; align-items: center; text-align: center; justify-content: space-between; margin-bottom: 15px">
          <el-col :span="15">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="handleCommand({}, 0)" style="width: 100%; padding: 10px 0"> <i class="el-icon-circle-plus-outline" style="cursor: pointer"></i></el-button>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="uplaodData" style="width: 100%; padding: 10px 0"> <i class="el-icon-refresh" style="cursor: pointer"></i></el-button>
          </el-col>
        </el-row>
        <el-tree :data="treeData" :props="defaultProps" class="treelable" :filter-node-method="filterNode" @node-click="handleNodeClick" :highlight-current="true" :expand-on-click-node="false" ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%; font-size: 14px; line-height: 1.75em; display: flex; justify-content: space-between">
            <span>{{ node.label }}</span>
            <span>
              <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                  <i class="el-icon-more el-icon--right" style="transform: rotate(90deg)"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleCommand(data, 2)">创建子分组</el-dropdown-item>
                  <el-dropdown-item @click.native="handleCommand(data, 1)">编辑</el-dropdown-item>
                  <el-dropdown-item @click.native="delCommand(data)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="18" class="right">
        <el-form size="mini" :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
          <el-form-item label="标签名称:">
            <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.name"></el-input>
          </el-form-item>
          <el-form-item label="标签编码:">
            <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.code"></el-input>
          </el-form-item>

          <el-form-item label="数据分类:">
            <el-select v-model="searchForm.remark" placeholder="请选择" style="width: 300px">
              <el-option label="客户资料" value="客户资料"></el-option>
              <el-option label="客户行为" value="客户行为"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签人数:">
            <el-input clearable placeholder="" style="width: 145px" v-model="searchForm.num_min"></el-input>
            -
            <el-input clearable placeholder="" style="width: 145px" v-model="searchForm.num_max"></el-input>
          </el-form-item>
          <el-form-item label="打标方式:">
            <el-select v-model="searchForm.action" placeholder="请选择" style="width: 300px">
              <el-option label="手动打标" :value="1"></el-option>
              <el-option label="自动打标" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="getDataList('form')" icon="el-icon-search" type="primary">查询</el-button>
            <el-button size="mini" @click="refDataList()" icon="el-icon-refresh" type="warning">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <div style="margin-bottom: 20px; text-align: right">
          <el-button size="mini" @click="selectionChangeHandle('top')" type="primary">更换分组 </el-button>
          <el-button size="mini" @click="addOrUpdateHandle()" type="primary">新增标签</el-button>
        </div>
        <!-- table -->
        <el-table :data="dataList" size="mini" border style="width: 100%" v-loading="dataListLoading" ref="multipleTable" @selection-change="handleSelectionChange">
          >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column align="center" header-align="center" label="编号" prop="typeName" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="标签名称" prop="name"> </el-table-column>
          <el-table-column align="center" header-align="center" label="标签编码" prop="code"></el-table-column>
          <el-table-column align="center" header-align="center" label="数据分类" prop="remark"></el-table-column>
          <el-table-column align="center" header-align="center" label="标签人数" prop="num"> </el-table-column>
          <el-table-column align="center" header-align="center" label="打标方式" prop="action">
            <template slot-scope="scope">
              <span>{{ scope.row.action == 1 ? '手动' : '自动' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" header-align="center" label="操作" width="230">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDel(scope.row)" plain type="danger">删除</el-button>
              <el-button size="mini" @click="addOrUpdateHandle(scope.row)" plain type="primary">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :current-page="pageIndex"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 10px; text-align: right"
        ></el-pagination>
      </el-col>
    </el-row>
    <popup @refreshList="getDataList" ref="popup"></popup>
    <popup1 @refreshList="treedata" ref="popup1"></popup1>

    <!-- 更换分组 -->
    <el-dialog title="更换标签分组" :visible.sync="dialogTableVisible" width="30%">
      <el-form size="mini" :model="form" :rules="rules" ref="form">
        <el-form-item label="新所属标签分组" label-width="140px" prop="cate_id">
          <select-tree :options="options" :multiple="multiple" :value="valueMultiple" @getValue="getSelectedValue"></select-tree>
          <el-input v-model="form.cate_id" placeholder="" style="display: none"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="textMessageReset('form')">取 消</el-button>
        <el-button size="mini" :loading="false" type="primary" @click="outboundCallSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  father_label_list, //标签选择数据回显
  label_list, // table数据列表
  label_del, //列表删除
  group_change, //更换分组
  father_label_del, //树形删除
} from '@/api/customer'
import popup from './popup'
import popup1 from './popup1'
import SelectTree from './select-tree'
export default {
  components: { popup, popup1, SelectTree },
  data() {
    return {
      dialogTableVisible: false,
      options: [],
      multiple: false, //tree 多选
      valueMultiple: {}, // tree 默认回显值
      form: {
        cate_id: '',
      },

      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataList: [], //table列表数据
      dataListLoading: false,
      multipleSelection: [],
      treeData: [], //tree列表
      filterText: '', //tree筛选
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      searchForm: {
        name: '',
        code: '',
        remark: '',
        num_min: '',
        num_max: '',
        action: '',
      },
      storageID: '', //存储筛选ID
      storageName: '', //存储筛选name
      rules: {
        cate_id: [{ required: true, message: '所属标签不能为空', trigger: 'blur' }],
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  mounted() {
    this.treedata()
    this.getDataList()
  },
  methods: {
    // tree选择值
    getSelectedValue(value) {
      this.form.cate_id = value.id
      console.log('选中的结果值', value)
    },
    // tree树形回显
    treedata() {
      father_label_list({ name: '' }).then((res) => {
        this.treeData = res.data.data
        this.options = res.data.data
      })
    },

    // tree 编辑添加
    handleCommand(data, index) {
      data.index = index //区分编辑、分组
      if (index == 1) {
        // 编辑
        this.$refs.popup1.open(data)
      } else if (index == 2) {
        // 创建子分组
        let d = { index: 2 }
        data.index = 2
        this.$refs.popup1.open(data)
      } else {
        // 添加一级分组
        let d = { index: 0 }
        this.$refs.popup1.open(d)
      }
    },
    // 获取数据列表
    getDataList(treeID) {
      this.dataListLoading = true

      if (treeID == undefined) {
        var info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize, cate_id: this.storageID }, this.searchForm)
      } else {
        if (treeID != 'form') {
          var info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize, cate_id: treeID }, this.searchForm)
        } else {
          var info = Object.assign({ pageNumber: 1, pageSize: this.pageSize, cate_id: this.storageID }, this.searchForm)
        }
      }
      info.num_min = info.num_min == '' ? 0 : parseInt(info.num_min) //最小值
      info.num_max = info.num_max == '' ? 0 : parseInt(info.num_max) //最大值
      info.action = info.action == '' ? 0 : parseInt(info.action) //打标转数字
      label_list(info)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 更新值
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //重置
    refDataList() {
      this.searchForm = {
        name: '',
        code: '',
        remark: '',
        num_min: '',
        num_max: '',

        action: '',
      }
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // tree搜索data
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // tree点击事件
    handleNodeClick(data) {
      if (data.children == undefined || data.children.length == 0) {
        this.getDataList(data.id)
      } else {
        this.getDataList(data.id)
      }
      this.storageID = data.id
      this.storageName = data.name
    },
    // 列表删除
    handleDel(row) {
      this.$confirm('确认删除')
        .then((_) => {
          label_del({ id: row.id })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success('删除成功')
                this.getDataList()
              }
            })
            .catch((e) => {
              this.$message.error('删除失败')
            })
        })
        .catch((_) => {})
    },
    // 更换分组
    selectionChangeHandle() {
      if (this.multipleSelection.length <= 0) return this.$message.error('请至少选择一个')
      this.dialogTableVisible = true
    },

    //更换分组 取消
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.dialogTableVisible = false
    },
    //更换分组  确定
    outboundCallSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let info = []
          for (let key in this.multipleSelection) {
            info.push(this.multipleSelection[key].id)
          }
          group_change({ ids: info, cate_id: this.form.cate_id })
            .then((res) => {
              if (res.code == 200) {
                this.textMessageReset('form')
                this.$message.success('更换成功')
                this.getDataList()
              }
            })
            .catch((e) => {
              this.$message.error('更换失败')
            })
        }
      })
    },
    // 树形删除
    delCommand(data) {
      father_label_del({ id: data.id })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.treedata()
          }
        })
        .catch((e) => {
          this.$message.error('删除失败')
        })
    },
    // 新增 / 修改 弹出层
    addOrUpdateHandle(row) {
      if (row == undefined) {
        // 新增
        let row = {
          cate_name: this.storageName,
          id: this.storageID,
          cate_id: this.storageID,
          index: 1,
        }
        console.log(row)
        this.$refs.popup.open(row)
      } else {
        // 修改
        this.$refs.popup.open(row)
      }
    },

    // 更新页面数据
    uplaodData() {
      this.filterText = ''
      this.storageName = ''
      this.storageID = ''
      this.treedata()
      this.getDataList()
    },
  },
}
</script>
<style scoped>
.treelable {
  padding-right: 20px;
}

/deep/ .treelable .el-tree-node__content {
  height: 35px;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #409eff;
  background: none;
}
</style>
